<template>
  <view>
    <view class="master-list" v-for="(item, index) in technicianList" :key="index">
      <view class="top">
        <view class="left">
          <image class="img" :src="item.avatar" alt="" />
        </view>
        <view class="right">
          <view class="shop-name">
            <view class="name-left">
              <view class="name">{{ item.name }}</view>
            </view>
          </view>
          <view class="shop-time">
            <view class="time-left">
              <view style="transform: translateX(-4rpx);">
                <u-icon name="file-text" color="#666666" size="18"></u-icon>
              </view>
              <view class="time">服务项目：{{ item.projectName }}</view>
            </view>
          </view>
          <view class="shop-time">
            <view class="time-left">
              <u-icon name="clock" color="#666666" size="15"></u-icon>
              <view class="time">服务时长：{{ item.duration }}分钟</view>
            </view>
          </view>
          <view class="shop-time">
            <view class="time-left">
              <u-icon name="clock" color="#666666" size="15"></u-icon>
              <view class="time">开始服务时间：{{ item.subscribeStartTime }}</view>
            </view>
          </view>
          <view class="money-box">
            <view class="red">
              <u-icon name="rmb" color="#fe4d4f" size="15"></u-icon>
              <view class="money">{{ item.price }}</view>
              <view class="rmb-text">原价</view>
            </view>
            <!-- <view class="grey">
              <u-icon name="rmb" color="#6d6d6d" size="12"></u-icon>
              <view class="money">{{ item.price }}</view>
              <view class="rmb-text">原价</view>
            </view> -->
          </view>
        </view>
      </view>
      <!-- <view class="bottom" v-if="item.zyOrderProductList && item.zyOrderProductList.length">
        <view class="project-item" v-for="(zItem, zIndex) in item.zyOrderProductList" :key="zIndex">
          <view class="name">{{ zItem.productName }}*{{ zItem.productNum }}</view>
          <view class="price">￥{{ getPrice(zItem.originalPrice, zItem.productNum) }}</view>
        </view>
      </view> -->
      <view class="goods-box" v-if="item.zyOrderProductList && item.zyOrderProductList.length">
        <view class="goods-item" v-for="(gItem, gIndex) in item.zyOrderProductList" :key="gIndex">
          <view class="goods-info">
            <view class="goods-name">{{ gItem.productName }}</view>
            <view class="goods-price">￥{{ gItem.originalPrice }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name:'orderMaster',
  data() {
    return {
      technicianList:[]
    }
  },
  props: {
    technicianConfig: {
      type: Array,
      default: []
    },
  },
  watch: {
    technicianConfig: {
      handler(newVal, oldVal) {
        this.technicianList = newVal
      }
    }
  },
  created() {
    this.technicianList = this.technicianConfig
  },
  methods: {
    getPrice(price, number) {
      return this.$methods.numberMul(Number(price), Number(number))
    }
  }

}
</script>

<style lang="scss" scoped>
  .master-list {
    // opacity: 1;
    // border-radius: 17rpx 17rpx 0 0;
    // background: rgba(255, 255, 255, 1);
    // margin: 0 38rpx;
    // margin-top: -100rpx;
    padding: 35rpx 0 1rpx 42rpx;
    // background-color: lightblue;

    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;

      .left {
        position: relative;

        .img {
          width: 165rpx;
          height: 165rpx;
          border-radius: 15rpx;
        }

      }

      .right {
        width: 65%;

        .shop-name {
          display: flex;
          justify-content: space-between;
          margin-bottom: 14rpx;

          .name-left {
            display: flex;

            .name {
              font-size: 32rpx;
              font-weight: 500;
              color: rgba(51, 51, 51, 1);
              height: 37rpx;
              line-height: 37rpx;
            }
          }
        }

        .shop-time {
          display: flex;
          justify-content: space-between;
          margin-bottom: 14rpx;

          .time-left {
            display: flex;

            .time {
              font-size: 22rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-left: 10rpx;
            }
          }
        }

        .money-box {
          display: flex;
          // justify-content: space-between;
          margin-top: 12rpx;

          .red {
            display: flex;
            align-items: center;
            margin-right: 15rpx;

            .money {
              font-size: 40.11rpx;
              font-weight: 500;
              letter-spacing: -0.28rpx;
              line-height: 47rpx;
              color: rgba(254, 77, 79, 1);
            }

            .rmb-text {
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(254, 77, 79, 1);
              margin-left: 12rpx;
              // transform: translateY(10rpx);
            }
          }

          .grey {
            display: flex;
            align-items: center;
            color: rgba(102, 102, 102, 1);

            .money {
              font-size: 22.79rpx;
              font-weight: 400;
              letter-spacing: -0.2rpx;
              line-height: 32.99rpx;
              transform: translateY(10rpx);
            }

            .rmb-text {
              font-size: 18.63rpx;
              font-weight: 400;
              letter-spacing: 0rpx;
              line-height: 26.98rpx;
              // transform: translateY(14rpx);
              margin-left: 12rpx;
            }
          }

        }
      }
    }
  }
  .goods-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .goods-item {
      display: flex;
      align-items: center;
      height: 50rpx;
      margin: 0 6rpx 6rpx;
      padding: 0 20rpx;
      border: 2rpx solid #d0d3d6;
      border-radius: 30rpx;
      font-size: 22rpx;
      .goods-info {
        display: flex;
        align-items: center;
        .goods-price {
          margin: 0 10rpx;
        }
      }
    }
  }
</style>